import React, { useCallback, useEffect, useRef, useState } from "react";
import { Route, Link, useHistory } from 'react-router-dom'
import logo from "./img/logo.jpg";
import seachImg from "./img/206搜索.png";
import Nav from "./css/nav.module.css";
import OldCss from "./css/search.module.css";//搜索框的css
import defaultHead from './img/head2.png'
import Personal from "./personal";

function Total() {

    // 判断是否登录了  登录就显示默认的头像  否则显示注册和登录按钮
    let isLogin = window.localStorage.getItem("isLogin")
    let history = useHistory();

    const refInput: any = useRef(undefined);
    // 输入完后按下回车
    document.onkeydown = function (e) {
        var keyNum = window.event ? e.key : '';
        if (keyNum == 'Enter') {
            console.log(refInput.current.value, "66666");
            history.push({ pathname: "/detailmore", state: { keyCode: refInput.current.value } });
        }
    }
    let InputEvent2 = useCallback(
        () => {
            // 搜索框的点击事件：实现把搜索框变长，同时显示下方的信息展示框
        }, []);
    // 节流
    function throttle(fn: any) {
        let canRun = true; // 通过闭包保存一个标记
        return function (e: any) {
            if (!canRun) return; // 在函数开头判断标记是否为 true，不为 true 则 return
            canRun = false; // 立即设置为 false
            setTimeout(() => { // 将外部传入的函数的执行放在 setTimeout 中
                fn.apply(this, e);
                // 最后在 setTimeout 执行完毕后再把标记设置为 true(关键)表示可以执行下一次循环
                canRun = true;
            }, 500);
        };
    }
    throttle(InputEvent2)
    function toLogin() {
        history.push({ pathname: "/login", state: {} });
    }
    function toRegister() {
        history.push({ pathname: "/register", state: {} });
    }
    function toHome() {
        history.push({ pathname: "/", state: {} });
    }
    function toExperience() {
        history.push({ pathname: "/experience", state: {} });
    }
    const [isShowPersonalBox, setisShowPersonalBox] = useState(false)
    // 显示个人信息框
    function ShowPersonalBox() {
        setisShowPersonalBox(true);
        console.log(isShowPersonalBox, "isShowPersonalBox");
    }
    // 隐藏个人信息框
    function hiddenPersonalBox() {
        setisShowPersonalBox(false);
    }
    return (
        <div>
            <div className={Nav.NavBox}>
                <div className={Nav.NavContent}>
                    {/* 左边logo */}
                    <div className={Nav.leftBox}>
                        <img src={logo} alt="" onClick={toHome} />
                    </div>
                    {/* 中间content 搜索框*/}
                    <div className={Nav.contentBox}>
                        {/* <div className={this.state.clickCss ? "" : OldCss.searchBox}> */}
                        <div className={OldCss.searchBox}>
                            <span className={Nav.seachImgLabelBox}>
                                <img className={Nav.seachImgLabel} src={seachImg} alt="" />
                            </span>
                            <input onChange={InputEvent2} type="text" className={Nav.searchInput} ref={refInput} placeholder='按城市、地址、地标搜索' />
                        </div>
                    </div>
                    {/* 右边logo */}
                    <div className={Nav.rightBox}>
                        <div className={Nav.rightContentBox}>
                            <ul className={Nav.navUl}>
                                <li>简体中文(CN)</li>
                                <li>￥CNY</li>
                                <li>手机端</li>
                                <li>出租房源</li>
                                <li onClick={toExperience}>开展体验</li>
                                <li>历史足迹</li>
                                <li>帮助</li>
                                <li className={Nav.HeadImgs}>
                                    <div className={isLogin ? Nav.HeadImg : Nav.hiddenHead}>
                                        <img src={defaultHead} onClick={ShowPersonalBox} className={Nav.Titleimg} alt="" />
                                        <div onMouseOut={hiddenPersonalBox} onMouseOver={ShowPersonalBox} className={isShowPersonalBox ? Nav.ShowPersonalBox : Nav.HiddenPersonalBox}>
                                            <Personal />
                                        </div>
                                    </div>
                                </li>
                                <li className={isLogin ? Nav.hiddenRegister_Login : Nav.dispalyRegister_Login} onClick={toRegister}>注册</li>
                                <li className={isLogin ? Nav.hiddenRegister_Login : Nav.dispalyRegister_Login} onClick={toLogin}>登录</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div >
    )
}



export default Total;
